<template>
  <div class="vue-box">
    <div class="c-panel">
      <el-tabs>
        <el-row>
          <el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: center">
            <el-form-item label="快递员:">
              <el-input v-model="formInline.name" placeholder="快递员姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号:">
              <el-input v-model="formInline.mobile" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
          <el-button type="success" @click="openaddrole">添加</el-button>
        </el-row>
        <br/>
        <el-row>
          <el-table
            :cell-style="{'text-align':'center'}"
            :data="crud"
            :header-cell-style="{'text-align':'center'}"
            stripe
            style="width: 100%">
            <el-table-column
              fixed
              label="快递员编号"
              prop="id"
            >
            </el-table-column>
            <el-table-column
              label="快递员姓名"
              prop="name"
            >
            </el-table-column>
            <el-table-column
              label="手机号"
              prop="mobile"
            >
            </el-table-column>
            <el-table-column
              label="所属机构"
              prop="orgname"
            >
            </el-table-column>
            <el-table-column
              label="APP账号"
              prop="account"
            >
            </el-table-column>
            <!--    编辑 删除按钮    -->
            <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row,crud)">编 辑
                </el-button>
                <span style="margin: auto 5px">|</span>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row,crud)">删 除
                </el-button>
                <span style="margin: auto 5px">|</span>
                <el-button size="mini" type="primary" @click="handlequery(scope.$index,scope.row,crud)">作 业 范 围
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <br/>
        <el-row style="text-align: center">
          <el-pagination
            :current-page="currentpage"
            :page-size="pagesize"
            :page-sizes="[3, 5, 7]"
            :total="total"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </el-row>


        <el-dialog :visible.sync="dialogTableVisible" title="可添加为快递员的账号" width="80%">
          <el-table :cell-style="{'text-align':'center'}" :data="gridData"
                    :header-cell-style="{'text-align':'center'}"
                    border
                    height="300"
          >
            <el-table-column

              label="快递员编号"
              prop="id"
            >
            </el-table-column>
            <el-table-column
              label="快递员姓名"
              prop="name"
            >
            </el-table-column>
            <el-table-column
              label="手机号"
              prop="mobile"
            >
            </el-table-column>
            <el-table-column
              label="性别"
              prop="sex"
            >
              <template v-slot="{row}">
                {{ row.sex | sex }}
              </template>
            </el-table-column>
            <el-table-column
              label="APP账号"
              prop="account"
            >
            </el-table-column>
            <el-table-column label="编辑">
              <template slot-scope="scope">
                <el-button size="mini" type="warning" @click="addrole(scope.$index, scope.row,crud)">添加为快递员
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>


        <el-dialog :visible.sync="dialogFormVisible" title="快递员信息">
          <el-form :model="form">
            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="form.name" placeholder="姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-radio v-model="form.sex" label="M">女</el-radio>
                  <el-radio v-model="form.sex" label="N">男</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="手机号" prop="name">
                  <el-input v-model="form.mobile" placeholder="手机号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮箱" prop="name">
                  <el-input v-model="form.email" placeholder="邮箱"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属机构">
                  <el-select v-model="orgnameone"  @change="updateorg" filterable placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="warning" @click="updatekdy">修 改</el-button>
          </div>
        </el-dialog>




      </el-tabs>

    </div>
  </div>

</template>

<script>

import axios from 'axios';

export default {
  name: 'courier',
  data() {

    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {},
      orgnameone: '',
      options: [
        {
          value: 100,
          label: '品达物流集团有限公司'
        },
        {
          value: 101,
          label: '品达上海分公司'
        },
        {
          value: 102,
          label: '品达北京分公司'
        }
      ],
      gridData: [],
      crud: [
        {
          id: '6',
          name: '快递员田某',
          mobile: '16787878345',
          orgname: '品达物流集团有限公司',
          account: 'apple',
        }
      ],
      formInline: {
        name: '',
        mobile: ''
      },
      integration: '',
      currentpage: 1,
      pagesize: 5,
      total: 0,

    }
  },
  filters: {
    sex(val) {
      return val == 'M' ? '女' : '男';
    }
  },
  created() {
    this.querycoreorg();
    this.queryPage();
  },
  methods: {
    //查询所有组织
    async querycoreorg(){
      let axioscoreorg = await axios.post('/api/pd-aggregationcjj/pd-core-org/queryCoreOrgListAll');
      // console.log(axioscoreorg);
      this.options=axioscoreorg.data.data;
    },
    //分页条件查询
    async queryPage() {
      let axiosResponse = await axios.post('/api/pd-aggregationlk/pd-auth-user/pdauthuserpagequery', {
        currentPage: this.currentpage,
        pageSize: this.pagesize,
        condition: this.formInline,
      });
      // console.log(axiosResponse);
      this.crud = axiosResponse.data.data.list;
      this.total = axiosResponse.data.data.total;

    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.queryPage();
    },
    handleCurrentChange(val) {
      this.currentpage = val;
      this.queryPage();
    },
    onSubmit() {
      this.queryPage();
    },
    //查看作业范围
    handlequery(index, row, crud) {
      this.$router.push({path:"/sp-basics/sp-basics-courier-map",query:{mapdata:row}})
    },
    /**
     * 点击删除,确认
     * @param index
     * @param row
     * @param crud
     */
    handleDelete(index, row, crud) {

      this.$confirm('确认删除该账号的快递员角色吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleterole(row.id);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //删除
    async deleterole(id) {
      let del = await axios.get('/api/pd-aggregationlk/pd-auth-user/delkdy?id=' + id);
      if (del.data.data) {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.queryPage();
      }
    },
    /**
     * 打开修改模态框
     * @param index
     * @param row
     * @param crud
     */
    handleEdit(index, row, crud) {
       this.form = JSON.parse(JSON.stringify(row));
       this.orgnameone = JSON.parse(JSON.stringify(row.orgname));
       this.dialogFormVisible = true;
    },
    //如果选择发生修改就把id换过去,直接换id会将name传过去
    updateorg(){
      this.form.orgId=this.orgnameone;
    },
    //修改快递员信息
    async updatekdy() {
      // if (typeof (this.orgnameone)=="number"){
      //   this.form.orgId=this.orgnameone;
      // }
      let updatek = await axios.post('/api/pd-aggregationlk/pd-auth-user/updatekdy',this.form);
      if (updatek.data.data){
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        this.dialogFormVisible=false;
        this.queryPage();
      }

    },
    //添加为快递员
    async addrole(index, row, crud) {
      let del = await axios.get('/api/pd-aggregationlk/pd-auth-user/addrole?id=' + row.id);
      if (del.data.data) {
        this.$message({
          message: '添加成功',
          type: 'success'
        });
        this.dialogTableVisible = false;
        this.queryPage();
      }
    },
    //打开可添加为快递员的数据模态框
    openaddrole() {
      this.dialogTableVisible = true;
      this.querynotrole();
    },
    //查询可添加为快递员的账号
    async querynotrole() {
      let querynotrolelist = await axios.post('/api/pd-aggregationlk/pd-auth-user/querynotrole');
      console.log(querynotrolelist);
      this.gridData = querynotrolelist.data.data;
    }
  }
}
</script>

<style>
.vue-box {
  height: 100%;
  overflow: hidden;
}
</style>
